<template>
  <section>
    <el-form-item label="字段属性名">
      <el-input v-model="selectWg.field"></el-input>
    </el-form-item>
    <el-form-item label="输入提示" v-if="selectWg.type == 'input'">
      <el-input v-model="selectWg.props.placeholder"></el-input>
    </el-form-item>
    <el-form-item label="选项列表" v-if="selectWg.type == 'select' || selectWg.type == 'radio' || selectWg.type == 'checkbox'">
      <Draggable :list="selectWg.options" :group="{ name:'options'}" ghostClass="ghost" handle=".move-icon">
        <template v-for="(item, index) in selectWg.options" style="display: flex;">
          <div style="flex:1">
            <el-input style="width: 40%;margin:4px 0" placeholder="label" v-model="selectWg.options[index].label"></el-input>
            <el-input style="width: 30%;margin:4px 5px" placeholder="value" v-model="selectWg.options[index].value"></el-input>
            <i class="el-icon-delete" size="18" style="padding: 0 5px;cursor: pointer" @click="handleOptionsRemove(index)"/>
          </div>
        </template>
      </Draggable>
      <div style="width: 100%;text-align: center;">
        <el-button type="primary" size="small" @click="handleAddOption()">添加选项</el-button>
      </div>
    </el-form-item>
    <el-form-item label="选项列表接口" v-if="selectWg.type == 'select' || selectWg.type == 'radio' || selectWg.type == 'checkbox'">
      <el-input v-model="selectWg.optionsApi" placeholder="请输入url,将加载url读取列表"></el-input>
    </el-form-item>
  </section>
</template>

<script>
import { mapState } from 'vuex';
import Draggable from 'vuedraggable'
import allFieldTypes from '../assets/js/field-types.js'
export default {
  components: {
    Draggable
  },
  props: {
    selectWg: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      fieldTypes: allFieldTypes,
      editorOption: {
        modules: {
          toolbar: '#toolbar'
        }
      }
    }
  },
  computed: {
    ...mapState({
      pageData: state => state.common.pageData,
      wgConfig: state => state.common.wgConfig
    })
  },
  methods: {
    isLink(val) {
      let isLink = this.$util.isLink(val);
      if (!isLink) this.$message.error('请输入正确的网址');
    },
    isRadio(flag) {
      this.selectWg.value = flag ? "" : []
    },
    selectfield(key, types) {
      let selectItem = types.find(item => key === item.value);
      this.selectWg.label.labelTitle = selectItem.label;
      this.selectWg.options ? this.selectWg.options = selectItem.options : "";
      if (this.$util.hasKey(this.selectWg, 'placeholder')) {
        this.selectWg.placeholder = this.selectWg.type === "input" ? `请输入${selectItem.label}` : `请选择${selectItem.label}`;
      }
    },
    handleOptionsRemove(index) {
      this.selectWg.options.splice(index, 1)
    },
    handleAddOption() {
      this.selectWg.options.push({label:'',value:''})
    }
  }
}
</script>
